<template>
  <div ref="chart"
       class="chart">
  </div>
</template>  
  
<script>  
import * as echarts from 'echarts';
import geoJsonData from "../mapJson/440000.json";
import { getCompanyPage } from '@/api/company';
export default {
  data () {
    return {
      companyList: [],
      maxValue:0
    };
  },
  mounted () {
    this.load();
  },
  methods: {
    load () {
      this.$nextTick(async () => {
        getCompanyPage({
          pageNum: 1,
          pageSize: 200
        }).then(res => {
          let i = 0;
          this.companyList = res.data.records;
          this.companyList.forEach(item => {
            this.maxValue = Math.max(item.annualOutput,this.maxValue)
          })
          this.drawChart();
        })
      });
    },
    drawChart () {
      const chartDom = this.$refs.chart
      const myChart = echarts.init(chartDom)
      echarts.registerMap('广东', geoJsonData);
      const _maxValue = this.maxValue;
      const option = {
        geo: {
          id: "guangdong",
          map: "广东",
          show: true,
          roam: true,
          scaleLimit: {
            min: 1.2,
            max: 10
          },
          aspectScale: 1.15, //宽高比
          emphasis: {
            itemStyle: {
              areaColor: "#0ff",
              borderColor: "#0ff"
            }
          },
          itemStyle: {
            normal: {
              areaColor: 'transparent',
              borderWidth: 2, //设置外层边框
              borderColor: 'white',
            },
          },
        },
        series: [
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            data: this.companyList.map(item => ({
              name: item.companyName,
              value: [item.lng, item.lat, item.annualOutput],
              info: item
            })),
            symbolSize: function (val) {
              return !val[2] ? 5 : val[2] / _maxValue * 15;
            },
          }
        ],
        visualMap: {
          min: 0,
          max: this.maxValue,
          left: 'left',
          top: 'center',
          text: ['高', '低'],
          textStyle: {
            color: 'white'
          },
          realtime: false,
          calculable: true,
          tooltip: {},
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        tooltip: {
          backgroundColor: '#eef7f2',
          borderColor: '#333',
          borderWidth: 1,
          borderRadius: 10,
          textStyle: {
            color: '#eef7f2',
            fontSize: 15,
            fontWeight: 'bold',
            lineHeight: 24,
          },
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowOffsetY: 2,
          formatter: function (params) {
            if (params && params.data) {
              const companyInfo = params.data.info
              let textHtml =
                `<div style="padding:5px;font-weight: 100;color:black;background-color: white;width: 300px;height:200px;border-radius: 10px;">
                                        <div style="font-weight: bold;width:100%;white-space: normal;">企业名称：${companyInfo.companyName}</div>
                                        <div>主要产品：${companyInfo.mainProducts}</div>
                                        <div>年产量：${companyInfo.annualOutput}吨</div>
                                        <div>联系电话：${companyInfo.contactPhone}</div>
                                        <div>联系人：${companyInfo.contacts}</div>
                                        <div style="white-space: normal;">公司地址：${companyInfo.address}</div>
                                    </div>`
              return textHtml;
            }
          }
        }
      };
      console.log(option.series[0].data)
      myChart.setOption(option);
      window.addEventListener('resize', () => {
        myChart.resize();
      }, false);
    }
  },
};  
</script>  
  
<style>
.chart {
  width: 40vw;
  height: 30vh;
}
</style>